html.dark {
  // brand colors
  --brand: 24,144,255;

  --antdocsblue-1: 0,13,77;
  --antdocsblue-2: 4,27,121;
  --antdocsblue-3: 14,50,166;
  --antdocsblue-4: 29,77,210;
  --antdocsblue-5: 48,111,255;
  --antdocsblue-6: 60,126,255;
  --antdocsblue-7: 104,159,255;
  --antdocsblue-8: 147,190,255;
  --antdocsblue-9: 190,218,255;
  --antdocsblue-10: 234,244,255;

  --red-1: 77,0,10;
  --red-2: 119,6,17;
  --red-3: 161,22,31;
  --red-4: 203,46,52;
  --red-5: 245,78,78;
  --red-6: 247,105,101;
  --red-7: 249,141,134;
  --red-8: 251,176,167;
  --red-9: 253,209,202;
  --red-10: 255,240,236;
  --orangered-1: 77,14,0;
  --orangered-2: 119,30,5;
  --orangered-3: 162,55,20;
  --orangered-4: 204,87,41;
  --orangered-5: 247,126,69;
  --orangered-6: 249,146,90;
  --orangered-7: 250,173,125;
  --orangered-8: 252,198,161;
  --orangered-9: 253,222,197;
  --orangered-10: 255,244,235;
  --orange-1: 77,27,0;
  --orange-2: 121,48,4;
  --orange-3: 166,75,10;
  --orange-4: 210,105,19;
  --orange-5: 255,141,31;
  --orange-6: 255,150,38;
  --orange-7: 255,179,87;
  --orange-8: 255,205,135;
  --orange-9: 255,227,184;
  --orange-10: 255,247,232;
  --green-1: 0,77,28;
  --green-2: 4,102,37;
  --green-3: 10,128,45;
  --green-4: 18,154,55;
  --green-5: 29,180,64;
  --green-6: 39,195,70;
  --green-7: 80,210,102;
  --green-8: 126,225,139;
  --green-9: 178,240,183;
  --green-10: 235,255,236;

  --primary-1: var(--antdocsblue-1);
  --primary-2: var(--antdocsblue-2);
  --primary-3: var(--antdocsblue-3);
  --primary-4: var(--antdocsblue-4);
  --primary-5: var(--antdocsblue-5);
  --primary-6: var(--antdocsblue-6);
  --primary-7: var(--antdocsblue-7);
  --primary-8: var(--antdocsblue-8);
  --primary-9: var(--antdocsblue-9);
  --primary-10: var(--antdocsblue-10);

  --success-1: var(--green-1);
  --success-2: var(--green-2);
  --success-3: var(--green-3);
  --success-4: var(--green-4);
  --success-5: var(--green-5);
  --success-6: var(--green-6);
  --success-7: var(--green-7);
  --success-8: var(--green-8);
  --success-9: var(--green-9);
  --success-10: var(--green-10);
  --danger-1: var(--red-1);
  --danger-2: var(--red-2);
  --danger-3: var(--red-3);
  --danger-4: var(--red-4);
  --danger-5: var(--red-5);
  --danger-6: var(--red-6);
  --danger-7: var(--red-7);
  --danger-8: var(--red-8);
  --danger-9: var(--red-9);
  --danger-10: var(--red-10);
  --warning-1: var(--orange-1);
  --warning-2: var(--orange-2);
  --warning-3: var(--orange-3);
  --warning-4: var(--orange-4);
  --warning-5: var(--orange-5);
  --warning-6: var(--orange-6);
  --warning-7: var(--orange-7);
  --warning-8: var(--orange-8);
  --warning-9: var(--orange-9);
  --warning-10: var(--orange-10);
  
  --color-primary-light-1: rgba(var(--primary-6), .2);
  --color-primary-light-2: rgba(var(--primary-6), .35);
  --color-primary-light-3: rgba(var(--primary-6), .5);
  --color-primary-light-4: rgba(var(--primary-6), .65);
  --color-danger-light-1: rgba(var(--danger-6), .2);
  --color-danger-light-2: rgba(var(--danger-6), .35);
  --color-danger-light-3: rgba(var(--danger-6), .5);
  --color-danger-light-4: rgba(var(--danger-6), .65);
  --color-success-light-1: rgb(var(--success-6), .2);
  --color-success-light-2: rgb(var(--success-6), .35);
  --color-success-light-3: rgb(var(--success-6), .5);
  --color-success-light-4: rgb(var(--success-6), .65);
  --color-warning-light-1: rgb(var(--warning-6), .2);
  --color-warning-light-2: rgb(var(--warning-6), .35);
  --color-warning-light-3: rgb(var(--warning-6), .5);
  --color-warning-light-4: rgb(var(--warning-6), .65);

  --gray-1: 23,23,26;
  --gray-2: 46,46,48;
  --gray-3: 72,72,73;
  --gray-4: 95,95,96;
  --gray-5: 120,120,122;
  --gray-6: 146,146,147;
  --gray-7: 171,171,172;
  --gray-8: 197,197,197;
  --gray-9: 223,223,223;
  --gray-10: 246,246,246;

  --color-neutral-1: rgb(var(--gray-1));
  --color-neutral-2: rgb(var(--gray-2));
  --color-neutral-3: rgb(var(--gray-3));
  --color-neutral-4: rgb(var(--gray-4));
  --color-neutral-5: rgb(var(--gray-5));
  --color-neutral-6: rgb(var(--gray-6));
  --color-neutral-7: rgb(var(--gray-7));
  --color-neutral-8: rgb(var(--gray-8));
  --color-neutral-9: rgb(var(--gray-9));
  --color-neutral-10: rgb(var(--gray-10));

  // background colors
  --color-bg-1: #17171a;
  --color-bg-2: #232324;
  --color-bg-3: #2a2a2b;
  --color-bg-4: #313132;
  --color-bg-5: #373739;


  --bg-body: var(--color-bg-1);
  --bg-navbar: var(--color-bg-2);
  --bg-navbar-searchbox: var(--bg-navbar);
  --bg-navbar-searchbox-icon: var(--color-bg-4);

  --bg-menu: var(--color-bg-2);
  --bg-modal: var(--color-bg-2);

  --bg-scrollbar: var(--bg-navbar);

  --bg-sidebar: var(--bg-body);

  --bg-blockquote: var(--color-bg-2);
  --bg-block-details: var(--color-bg-2);
  --bg-code: var(--color-neutral-2);

  --bg-code-hl: rgba(0, 0, 0, 0.66);
  --code-ln-color: #9e9e9e;

  // shadow
  --shadow-s: 0px 2px 6px rgba(0,0,0,0.1);
  --shadow-m: 0px 5px 10px rgba(0,0,0,0.15);
  --theme-shadow: var(--shadow-m);

  // text colors
  --color-text-1: hsla(0,0%,100%,0.9);
  --color-text-2: hsla(0,0%,100%,0.7);
  --color-text-3: hsla(0,0%,100%,0.5);
  --color-text-4: hsla(0,0%,100%,0.3);

  // border colors
  --color-border: #333335;

  --border-menu: var(--color-border);
  --border-navbar-bottom:var(--color-border);

  // badge component colors
  --badge-tip: rgb(var(--success-2));
  --badge-warning: rgb(var(--warning-2));
  --badge-danger: rgb(var(--danger-2));


}
